<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩管理</title>
    <link rel="stylesheet" href="../static/plt/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="../static/plt/Font-Awesome-3.2.1/css/font-awesome.css">

    <style>

        table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      text-align: center;

      padding: 8px;
    }

     #panel {
      display: none;
      width: 800px;
      height: 600px;
      background-color: #d0e9c6;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    </style>

</head>
<body>
<div>
    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> 成绩管理</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li ><a href="#" id="addscore">增加记录 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">分析成绩</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">排序 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li role="separator" class="divider"></li>
            <li><a id="orderAsc" href="#">升序保存到文件(总分)</a></li>
            <li role="separator" class="divider"></li>
            <li id="orderDesc"><a  href="#">降序保存到文件(总分)</a></li>
          </ul>
        </li>
      </ul>
      <form id="searchform" class="navbar-form navbar-left" method="post" action="/searchScore">
        <div class="form-group">
          <input id="searchinput" type="text" class="form-control" placeholder="Search">
        </div>
        <button id="searchbutton" type="submit" class="btn btn-default">查找</button>
      </form>
      <ul class="nav navbar-nav">
        <li style="margin-left: 700px"><a href="{{ url_for('returnMain', name='管理员') }}"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>  返回</a></li>
      </ul>
    </div>
  </div>
</nav>

</div>
<div>
  <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title" style="font-size: 25px">学生成绩表</h3>
      </div>
      <div class="panel-body">
        <table class="table table-striped">
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>数据结构</th>
          <th>软件工程</th>
          <th>计算机网络</th>
          <th>单片机原理</th>
          <th>Java程序设计</th>
          <th>Python程序设计</th>
          <th>总分</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
      {% for item in data %}
      <tr >
      <td>{{item['学号'] }}</td>
      <td>{{item['姓名'] }}</td>
      <td>{{item['数据结构'] }}</td>
      <td>{{item['软件工程'] }}</td>
      <td>{{item['计算机网络'] }}</td>
      <td>{{item['单片机原理'] }}</td>
      <td>{{item['Java程序设计'] }}</td>
      <td>{{item['Python程序设计'] }}</td>
      <td>{{item['总分'] }}</td>
      <td>
       <button onclick="editTable()" type="submit" class="update btn btn-warning btn-sm "><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;修改&nbsp;&nbsp;&nbsp;</button><button type="submit" class="delete btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;</button>
      </td>
      {% endfor %}
    </tr>
    </tbody>
    </table>
      </div>
    </div>
</div>
</div>

<div>
    <form id="erroraddscore" method="post" action="/info/addscore">
<div>
  <div id="panel">
    <div><div class="alert alert-success" role="alert">添加学生成绩信息</div></div>
    <div class="row show-grid">
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >学号</label>
    <input type="text" class="form-control" name="sid" placeholder="输入学号...">
  </div>
    </div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >姓名</label>
    <input type="text" class="form-control" name="sname" placeholder="输入姓名...">
  </div>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >数据结构</label>
    <input type="text" class="form-control" name="datastructure" placeholder="输入数据结构成绩...">
  </div>
    </div>
  </div>
      <div>
    <div class="row show-grid">
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >软件工程</label>
    <input type="text" class="form-control" name="application" placeholder="输入软件工程成绩...">
  </div>
    </div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >计算机网络</label>
    <input type="text" class="form-control" name="network" placeholder="输入计算机网络成绩...">
  </div>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >单片机原理</label>
    <input type="text" class="form-control" name="chip" placeholder="输入单片机原理成绩...">
  </div>
    </div>
  </div>
          <div class="row show-grid">
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >Java程序设计</label>
    <input type="text" class="form-control" name="java" placeholder="输入Java程序设计成绩...">
  </div>
    </div>
    <div class="col-xs-6 col-sm-4">
      <div class="form-group">
    <label >Python程序设计</label>
    <input type="text" class="form-control" name="python" placeholder="输入Python程序设计成绩...">
  </div>
    </div>
  </div>
  <button style="margin-left: 200px;margin-top: 100px"  id="btnClose1" type="submit" class="btn btn-default btn-info">添加</button>
  <button style="margin-left: 300px;margin-top: 100px" id="btnClose" type="button" class="btn btn-default btn-danger ">取消</button>
    </div>
  </div>
</div>
</form>

</div>
  <script src="../static/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
  <script src="../static/plt/bootstrap-3.4.1/js/bootstrap.js"></script>
<script>

  // 出现
  document.getElementById('addscore').addEventListener('click', function() {
    var panel = document.getElementById('panel');
    panel.style.display = 'block';
  });
  // 隐藏
  document.getElementById('btnClose').addEventListener('click', function() {
    var panel = document.getElementById('panel');
    panel.style.display = 'none';
});
  </script>
<script>
  $(".delete").on("click", function() {
  if (confirm("是否删除此条数据？")) {
    var studentId = $(this).closest("tr").find("td:eq(0)").text(); // 假设学号位于第一列
      // console.log(studentId)
      $.ajax({
      url: "/deleteScore", // 后端API地址
      type: "POST",
      data: { id: studentId },
      success: function(response) {
        // 处理成功的情况，提示用户删除成功
        alert("删除成功,刷新网页查看最新结果");
      },
      error: function(xhr, status, error) {
        // 处理错误的情况，提示用户删除失败
        alert("删除失败：" + error);
      }
    });
  } else {
    ;
  }
});
$(".update").on("click", function() {
   if (confirm("是否修改此条数据？")) {
    var row = $(this).closest("tr");
    row.find("td:not(:last-child)").attr("contentEditable", "true");
    row.find("td:first-child").attr("contentEditable", "false");
    row.find("td:nth-child(2)").focus();
    } else {
        // 不进行任何操作
    }
  });
$("body").on("keydown", function(e) {
  if (e.keyCode === 13) {
    var row = $(e.target).closest("tr");
    row.find("td:not(:last-child)").attr("contentEditable", "false");
    var modifiedData = [];
    row.find("td:not(:last-child)").each(function() {
    modifiedData.push($(this).text());
  });
  $.ajax({
    url: '/updateScore',
    type: 'POST',
    data: JSON.stringify({data: modifiedData}),
    contentType: 'application/json; charset=utf-8',
    success: function(response) {
          alert("更新成功,刷新网页查看最新数据");
    },
    error: function(error) {
        alert("更新失败：" + error);
  }
});
  }
});




/*document.getElementById('orderAsc').addEventListener('click', function() {
    sortData('ASC');
});

document.getElementById('orderDesc').addEventListener('click', function() {
    sortData('DESC');
});
function sortData(flag) {
    if (flag === 'ASC'){
        $.ajax({
        url: "/orderASC", // 后端API地址
        type: "POST",
        contentType: false,
        processData: false,
        data: JSON.stringify({ data: 1 }), // 将对象转换为JSON字符串
        //contentType: "application/json; charset=utf-8", // 设置请求头中的Content-Type
    })
    }else{
            $.ajax({
        url: "/orderDESC", // 后端API地址
        type: "POST",
        contentType: false,
        processData: false,
        data: JSON.stringify({ data: 1 }), // 将对象转换为JSON字符串
        //contentType: "application/json; charset=utf-8", // 设置请求头中的Content-Type
    })
        }

}*/

document.getElementById('orderAsc').addEventListener('click', function() {
    sortData('ASC');
});

document.getElementById('orderDesc').addEventListener('click', function() {
    sortData('DESC');
});
  function sortData(flag) {
    if (flag === 'ASC'){
        $.ajax({
            url: "/orderASC", // 后端API地址
            type: "POST",
            contentType: false,
            processData: false,
            data: JSON.stringify({ data: 1 }), // 将对象转换为JSON字符串
            //contentType: "application/json; charset=utf-8", // 设置请求头中的Content-Type
            success: function(response) {
                if (response === 0 || response === 1) {
                    console.log("成功返回：" + response);
                } else {
                    console.error("返回值错误");
                }
            },
            error: function() {
                console.error("请求失败");
            }
        });
    }else{
        $.ajax({
            url: "/orderDESC", // 后端API地址
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify({ data: 1 }),
            //contentType: "application/json; charset=utf-8", // 设置请求头中的Content-Type
            success: function(response) {
                if (response === 0 || response === 1) {
                    console.log("成功返回：" + response);
                } else {
                    console.error("返回值错误");
                }
            },
            error: function() {
                console.error("请求失败");
            }
        });
    }
}

/*document.getElementById('searchbutton').addEventListener('click', function() {
    var inputtext = document.getElementById("searchinput").value;
    $.ajax({
        url: '/searchScore',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({form: inputtext}),
        //data:{data:inputtext},

        success: function (response) {
            alert("查询结果：" + response.message);
        },
        error: function () {
            alert("查询失败，请重试。");
        }
    })
})*/


   $(document).ready(function() {
    $('#searchbutton').click(function() {
      var searchTerm = $('#searchinput').val();
      $.ajax({
        url: '/searchScore',
        type: 'POST',
        data: JSON.stringify({ 'search_data': searchTerm }),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function(response) {
            // 处理正确情况
          alert(response)
        },
        error: function() {
          // 处理错误情况
            alert("查询失败")

        }
      });
      return false;  // 阻止表单默认提交行为
    });
  });
</script>
</body>
</html>